<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP/3：下一代网络协议的革命性飞跃</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        .content-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.2rem;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 3rem;
            margin-bottom: 2rem;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0.75rem;
            top: 0.5rem;
            width: 0.5rem;
            height: 0.5rem;
            background: #667eea;
            border-radius: 50%;
        }
        
        .timeline-item::after {
            content: '';
            position: absolute;
            left: 1rem;
            top: 1.5rem;
            width: 1px;
            height: calc(100% + 1rem);
            background: #e5e7eb;
        }
        
        .timeline-item:last-child::after {
            display: none;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 relative">
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 animate-fadeInUp">
                    HTTP/3
                </h1>
                <p class="text-2xl md:text-3xl mb-4 opacity-90 animate-fadeInUp" style="animation-delay: 0.2s">
                    下一代网络协议的革命性飞跃
                </p>
                <p class="text-lg md:text-xl opacity-80 max-w-2xl mx-auto animate-fadeInUp" style="animation-delay: 0.4s">
                    基于 QUIC 协议，重新定义网络传输的速度与可靠性，为现代互联网应用带来前所未有的性能提升
                </p>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <div class="content-card rounded-2xl p-8 md:p-12">
                    <p class="text-lg leading-relaxed text-gray-700">
                        <span class="drop-cap">H</span>TTP/3 是继 HTTP/1.1 和 HTTP/2 之后的新一代超文本传输协议，由 IETF（互联网工程任务组）制定，是基于 <strong class="text-purple-600">QUIC</strong> 协议实现的。QUIC（Quick UDP Internet Connections）是一种传输层协议，利用 UDP 提供可靠、快速的传输服务，从根本上优化了传统的 HTTP 协议性能。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Features Section -->
    <section class="py-16">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="section-title text-3xl md:text-4xl font-bold mb-12 text-gray-800">
                    <i class="fas fa-star mr-3 feature-icon"></i>HTTP/3 的主要特点
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-shield-alt text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">基于 QUIC 的可靠传输</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    HTTP/3 使用 QUIC 替代了 TCP 作为传输层协议。QUIC 是一种基于 UDP 的协议，具有快速握手、内置加密等特点，克服了 TCP 中的许多性能瓶颈。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-stream text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">单连接多路复用</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    HTTP/3 支持多路复用，但与 HTTP/2 不同，HTTP/3 的多路复用是在 QUIC 的流级别实现的，避免了 HTTP/2 中的"队头阻塞"问题。每个流都有独立的标识，不依赖于其他流。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-lock text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">内置加密与隐私保护</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    QUIC 内置了 TLS 1.3 加密，所有 HTTP/3 的通信默认是加密的，提高了数据传输的安全性。不需要独立的加密握手过程，加快了连接的建立速度。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-bolt text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">快速握手</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    QUIC 使用 0-RTT 和 1-RTT 机制，在大多数情况下可以实现连接的快速建立甚至无延迟通信。与传统 TCP+TLS 的三次握手和加密握手相比，延迟显著降低。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-wifi text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">改进的网络迁移</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    QUIC 使用基于连接 ID 的机制支持连接迁移。例如，用户从 Wi-Fi 切换到蜂窝网络时，不需要重新建立连接，从而提高了移动场景下的体验。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card rounded-xl p-8">
                        <div class="flex items-start mb-4">
                            <i class="fas fa-redo text-3xl feature-icon mr-4 mt-1"></i>
                            <div>
                                <h3 class="text-xl font-bold mb-3 text-gray-800">高效的丢包恢复</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    QUIC 通过帧级别的丢包检测与恢复来减少丢包的影响，不像 TCP 那样需要等待重传整个窗口的数据。支持基于 ACK 的快速重传，降低了重传引起的额外延迟。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technical Architecture Visualization -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="section-title text-3xl md:text-4xl font-bold mb-12 text-gray-800">
                    <i class="fas fa-network-wired mr-3 feature-icon"></i>HTTP/3 技术架构
                </h2>
                
                <div class="content-card rounded-2xl p-8 md:p-12">
                    <div class="mermaid">
                        graph TB
                            A[HTTP/3 应用层] --> B[QUIC 传输层]
                            B --> C[UDP 网络层]
                            B --> D[TLS 1.3 加密]
                            B --> E[流控制]
                            B --> F[拥塞控制]
                            B --> G[连接迁移]
                            
                            style A fill:#667eea,stroke:#fff,stroke-width:2px,color:#fff
                            style B fill:#764ba2,stroke:#fff,stroke-width:2px,color:#fff
                            style C fill:#f093fb,stroke:#fff,stroke-width:2px,color:#fff
                            style D fill:#4facfe,stroke:#fff,stroke-width:2px,color:#fff
                            style E fill:#43e97b,stroke:#fff,stroke-width:2px,color:#fff
                            style F fill:#fa709a,stroke:#fff,stroke-width:2px,color:#fff
                            style G fill:#fee140,stroke:#fff,stroke-width:2px,color:#fff
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Implementation Principles -->
    <section class="py-16">
        <div class="container mx-auto px